<template>
	<div class="system-user-container app-container">
		<el-card shadow="always">
			<!-- 查询 -->
			<el-form :model="state.queryParams" ref="queryForm" :inline="true" label-width="68px">
				<el-form-item label="系统模块" prop="title">
					<el-input
						placeholder="请输入系统模块模糊查询"
						clearable
						@keyup.enter="handleQuery"
						style="width: 240px"
						v-model="state.queryParams.title"
					/>
				</el-form-item>
				<el-form-item label="操作人员" prop="operName">
					<el-input
						placeholder="请输入操作人员模糊查询"
						clearable
						@keyup.enter="handleQuery"
						style="width: 240px"
						v-model="state.queryParams.operName"
					/>
				</el-form-item>
				<el-form-item label="类型" prop="businessType">
					<el-select v-model="state.queryParams.businessType" placeholder="操作类型" clearable style="width: 240px">
						<el-option v-for="dict in state.typeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" plain @click="handleQuery">
						<SvgIcon name="elementSearch" />
						搜索
					</el-button>
					<el-button @click="resetQuery">
						<SvgIcon name="elementRefresh" />
						重置
					</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<div class="box-card" style="padding: 10px 0">
			<div style="display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px">
				<el-card
					v-for="(data, index) in state.mockCards"
					:key="index"
					shadow="hover"
					:header="data.title"
					style="width: 32%; background-color: #e4e6e9"
				>
					<div
						@click="state.open = true"
						class="flex-wrap-item"
						v-for="(c, idx) in data.content"
						:key="idx"
						style="background: #ffffff; padding: 10px; border-radius: 4px; margin-bottom: 16px; cursor: pointer"
					>
						{{ c.name }}
					</div>
				</el-card>
			</div>
		</div>

		<!-- 任务详情 -->
		<el-dialog title="任务详情" width="70%" v-model="state.open" center append-to-body>
			<el-form label-position="right" ref="ruleFormRef" :model="state.modelForm" label-width="100px" :rules="rules">
				<el-form-item label="需求标题" prop="title"><el-input v-model="state.modelForm.title" style="width: 50%" /> </el-form-item>
				<el-form-item label="需求内容" prop="content"
					><el-input v-model="state.modelForm.content" type="textarea" style="width: 80%" />
				</el-form-item>
				<el-form-item label="解决方案" prop="solution"
					><el-input v-model="state.modelForm.solution" type="textarea" style="width: 80%" />
				</el-form-item>
				<el-form-item label="优先级" prop="priority">
					<el-select v-model="state.modelForm.priority" placeholder="请选择优先级" style="width: 80%">
						<el-option label="Zone one" value="shanghai" />
						<el-option label="Zone two" value="beijing" />
					</el-select>
				</el-form-item>
				<el-form-item label="预估工时" prop="costTime"><el-input v-model="state.modelForm.costTime" style="width: 80%" /> </el-form-item>
				<el-form-item label="结算工时" prop="payTime"><el-input v-model="state.modelForm.payTime" style="width: 80%" /> </el-form-item>
				<div style="display: flex; width: 82%; justify-content: space-between">
					<el-col :span="12">
						<el-form-item label="采购成本" prop="costProcure"><el-input v-model="state.modelForm.costProcure" /> </el-form-item>
					</el-col>
					<el-col :span="12"
						><el-form-item label="采购报销" prop="payProcure"><el-input v-model="state.modelForm.payTime" /> </el-form-item
					></el-col>
				</div>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="state.open = false">关 闭</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup name="Operlog">
import { reactive, onMounted, toRefs, ref, getCurrentInstance } from 'vue';
import { listOperInfo, delOperInfo, cleanOpernfo } from '@/api/log/oper';
import { ElMessageBox, ElMessage } from 'element-plus';
import draggable from 'vuedraggable';

const { proxy } = getCurrentInstance() as any;
const ruleFormRef = ref<HTMLElement | null>(null);
const state = reactive({
	// 遮罩层
	loading: true,
	// 总条数
	total: 0,
	// 列表表格数据
	tableData: [],
	// 选中数组
	ids: [],
	// 非单个禁用
	single: true,
	// 非多个禁用
	multiple: true,
	// 弹出层标题
	title: '',
	// 是否显示弹出层
	open: false,
	// 表单参数
	modelForm: { title: '', content: '' },
	// 类型数据字典
	typeOptions: [],
	// 类型数据字典
	statusOptions: [],
	// 查询参数
	queryParams: {
		pageNum: 1,
		pageSize: 10,
		title: undefined,
		operName: undefined,
		businessType: undefined,
	},

	// 卡片
	mockCards: [
		{ title: '西瓜', id: 0, content: [{ name: 'lll' }, { name: 'lll' }, { name: 'lll' }] },
		{ title: '橙子', id: 1, content: [{ name: 'lll' }, { name: 'lll' }] },
		{ title: '草莓', id: 2, content: [{ name: 'lll' }, { name: 'lll' }] },
		{ title: '了额', id: 3, content: [{ name: 'lll' }, { name: 'lll' }, { name: 'lll' }] },
	],
	enabled: true,
	dragging: false,
});
const rules = reactive({
	title: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
	content: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
	priority: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
	costTime: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
	payTime: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
	costProcure: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
	payProcure: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
});
/** 查询定时任务列表 */
const handleQuery = () => {
	state.loading = true;
	listOperInfo(state.queryParams).then((response) => {
		state.tableData = response.data.data;
		state.total = response.data.total;
		state.loading = false;
	});
};

/** 重置按钮操作 */
const resetQuery = () => {
	state.queryParams.title = undefined;
	state.queryParams.operName = undefined;
	state.queryParams.businessType = undefined;
	handleQuery();
};

/** 清空按钮操作 */
const handleClean = () => {
	ElMessageBox({
		message: '是否确认清空所有操作日志数据项?',
		title: '警告',
		showCancelButton: true,
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(function () {
			return cleanOpernfo();
		})
		.then(() => {
			handleQuery();
			ElMessage.success('清空成功');
		});
};

/** 删除按钮操作 */
const onTabelRowDel = (row: any) => {
	const operIds = row.operId || state.ids;
	ElMessageBox({
		message: '是否确认删除日志编号为"' + operIds + '"的数据项?',
		title: '警告',
		showCancelButton: true,
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(function () {
		return delOperInfo(operIds).then(() => {
			handleQuery();
			ElMessage.success('删除成功');
		});
	});
};

/** 详细按钮操作 */
const handleView = (row: any) => {
	state.open = true;
	state.modelForm = row;
};

//分页页面大小发生变化
const handleSizeChange = (val: any) => {
	state.queryParams.pageSize = val;
	handleQuery();
};
//当前页码发生变化
const handleCurrentChange = (val: any) => {
	state.queryParams.pageNum = val;
	handleQuery();
};

// 操作日志状态字典翻译
const statusFormat = (row: any, column: any) => {
	return proxy.selectDictLabel(state.statusOptions, row.status);
};

// 操作日志类型字典翻译
const typeFormat = (row: any, column: any) => {
	return proxy.selectDictLabel(state.typeOptions, row.businessType);
};
// 多选框选中数据
const handleSelectionChange = (selection: any) => {
	state.ids = selection.map((item: any) => item.operId);
	state.single = selection.length != 1;
	state.multiple = !selection.length;
};

// 页面加载时调用
onMounted(() => {});
</script>

<style></style>
